<!--
 * @Description: app分享海报预览弹窗
 * @Author: Li Yujie
 * @Date: 2021/07/21
 * @Last Modified by: Li Yujie
 * @Last Modified time: 2021/07/21
-->
<template>
    <section class="wrapper">
        <el-dialog
            :visible.sync="dialogVisible"
            :show-close="false"
            width="375px"
            :close-on-click-modal="false"
        >
            <div
                class="close-btn"
                @click="dialogVisible = false"
            >
                <i class="el-icon-circle-close"/>
            </div>
            <div
                class="dialog-content"
                v-if="dialogVisible"
            >
                <page-header
                    title="分享赚现金"
                    style="flex-shrink: 0"
                />
                <div class="content-wrapper">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div
                                class="swiper-slide"
                                v-for="(item,index) in previewData"
                                :key="index"
                                :style="{
                                    background: `url(${item}) center no-repeat`,
                                    backgroundSize: 'cover'
                                }"
                            >
                                <div class="invite-code">
                                    <div class="qrcode-view">
                                        <div class="qrcode-content">
                                            二维码
                                        </div>
                                    </div>
                                    <div class="code-text">- 邀请码 -</div>
                                    <div class="code-view">666666</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="share-button">立即分享</div>
                </div>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import PageHeader from "@/components/invite-friends/page-header";
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';

export default {
    name: 'SharePosterPreview',
    data() {
        return {
            dialogVisible: false,
            previewData: [],
            swiper: null
        };
    },
    components: {PageHeader},
    mounted() {},
    methods: {

        /**
         * 展示弹窗
         * @param data
         */
        show(data) {
            this.dialogVisible = true;
            this.previewData = data;
            if(data.length) {
                this.$nextTick(() => {
                    this.initSwiper();
                });
            }
        },

        /**
         * 初始化轮播
         */
        initSwiper() {
            this.swiper = new Swiper('.swiper-container', {
                slidesPerView: 'auto',
                spaceBetween: 8,
                centeredSlides: true,
                loop: this.previewData.length > 1,
                coverflowEffect: {
                    rotate: 0,
                    stretch: 0,
                    depth: 300,
                    modifier: 1,
                    slideShadows: false,
                }
            });
        }
    }
};
</script>

<style scoped lang="less">
.wrapper {
    /deep/ .el-dialog {
        width: 375px;
        height: 667px;
        background: #F5F6F8;
        box-shadow: 0 0 20px 0 rgba(153, 169, 192, 0.2);
        position: relative;

        .close-btn {
            position: absolute;
            right: -20px;
            top: -20px;
            cursor: pointer;
            font-size: 20px;
            color: #fff;
        }

        .el-dialog__header {
            display: none;
        }

        .el-dialog__body {
            width: 100%;
            height: 100%;
            overflow-y: auto;
            padding: 0;
            &::-webkit-scrollbar {
                width: 0;
                height: 0;
            }
            .dialog-content {
                height: 100%;
                display: flex;
                flex-direction: column;
                .content-wrapper {
                    background: #fff;
                    flex: 1;
                    padding: 42px 0 98px;
                    position: relative;
                    .share-button {
                        position: absolute;
                        bottom: 27px;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 315px;
                        height: 44px;
                        background: #20A0FF;
                        box-shadow: 0 4px 14px 0 rgba(32, 160, 255, 0.5);
                        border-radius: 22px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 16px;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: #FFFFFF;
                        cursor: pointer;
                    }
                    .swiper-container {
                        width: 100%;
                        height: 100%;
                    }
                    .swiper-slide {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        -webkit-justify-content: center;
                        justify-content: center;
                        -webkit-box-align: center;
                        -ms-flex-align: center;
                        -webkit-align-items: center;
                        align-items: center;
                        transition: 300ms;
                        transform: scale(0.9);
                        width: 259px;
                        border-radius: 8px;
                        position: relative;
                        .invite-code {
                            position: absolute;
                            bottom: 18px;
                            left: 50%;
                            transform: translateX(-50%);
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            .qrcode-view {
                                width: 65px;
                                height: 65px;
                                background: rgba(255, 255, 255, 0.9);
                                border-radius: 4px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                margin-bottom: 4px;
                                .qrcode-content {
                                    width: 55px;
                                    height: 55px;
                                    background: #A5AEB4;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    font-size: 10px;
                                    font-family: PingFangSC-Regular, PingFang SC;
                                    font-weight: 400;
                                    color: #000000;
                                }
                            }
                            .code-text {
                                font-size: 10px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: rgba(0, 0, 0, 0.85);
                                margin-bottom: 4px;
                            }
                            .code-view {
                                height: 14px;
                                background: rgba(255, 255, 255, 0.9);
                                border-radius: 7px;
                                text-align: center;
                                font-size: 10px;
                                font-family: PingFangSC-Semibold, PingFang SC;
                                font-weight: 600;
                                color: rgba(0, 0, 0, 0.75);
                                padding: 0 5px;
                            }
                        }
                    }
                    .swiper-slide-active,.swiper-slide-duplicate-active{
                        transform: scale(1);
                    }
                }
            }

        }
    }

}
</style>
